<template>
    <header class="topbar-nav">
    <!-- Main Menu Start -->
    <div class="site-navigation menu-transparent" :class="{'menu-sticky': showW}"> 
      <nav class="navbar navbar-expand-lg navbar-light navbar-sticky">
        <div class="navbar-container">
          <router-link class="navbar-brand" style="display:flex;align-items:center;" :to="{name:'index'}">
            <img src="../../assets/img/hqxl-logo3.png" alt="" class="img-fluid">
            <img src="../../assets/img/logo_slogen.png" style="width: 160px;" class="img-fluid">
            <span class="line"></span>
          </router-link >
          <!-- Toggler -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <!-- Collapse -->
          <div class="collapse navbar-collapse  mainmenu" id="navbarMenu">
            <ul class="navbar-nav navbar-menu">
              <li class="nav-item dropdown " v-for="item in homeMenu" :key="item">
                <span class="nav-link" @click="jump(item)">
                  {{item.label}}
                  <span class="caret" v-if="item.child?.length > 0"></span>
                </span>
                <!-- 子菜单 -->
                <ul class="sub_child" v-if="item.child?.length > 0">
                    <li class="sub_child_li" v-for="subItem in item.child">
                        <span @click="jump(subItem)">{{ subItem.label }}</span>
                        <ElIcon  v-if="subItem.child?.length > 0" class="menu_icon"><ArrowRight /></ElIcon>
                        <!-- 孙菜单 -->
                        <ul class="next_child" v-if="subItem.child?.length > 0">
                            <li v-for="nextItem in subItem.child">
                                <span @click="jump(nextItem)">{{ nextItem.label }}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- / .navbar-collapse -->
        </div>
        <!-- / .container -->
      </nav>
    </div>
  </header>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import {ElIcon} from 'element-plus'
import {ArrowRight} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const showW = ref(false)
const router = useRouter()
onMounted(() => {
    window.addEventListener('scroll', (e)=>{
        let top = document.documentElement.scrollTop
        showW.value = top > 100
    })
})

const homeMenu = reactive([
    {
        label: '数科产品',
        child: [
            {label: '特色产品',link: ''},
            {label: '标准产品', link: ''}
        ]
    },
    {
        label: '生态赋能',
        child: [
            {label: '全球物流',link:''},
            {
                label: '系统服务',
                child: [
                    {label: '四流合一平台系统', link: ''},
                    {label: '集团财务管理系统', link: ''},
                    {label: '一键开店经销系统', link: ''},
                    {label: '个性快递服务系统', link: ''},
                ]
            },
            {
                label: '直播电商',
                child: [
                    {label: '直播选品', link: ''},
                    {label: '平台入驻', link: ''},
                    {label: '商品代采', link: ''},
                    {label: '一件代发', link: ''},
                ]
            },
        ]
    },
    {label: '解决方案', link: ''},
    {label: 'ESG评价', link: ''},
    {label: '联系我们', link: '#bottom'},
    {label: '登录', link: 'login'},
])

// 跳转
const jump = (item) => {
    if(item.child?.length > 0) return
    if(item.link === '#bottom') return document.documentElement.scrollTop = document.getElementById('app').offsetHeight
    router.push({name: item.link})
}
</script>
<style scoped>
.navbar-menu{
    align-items: flex-start;
}
.sub_child{
    list-style-type: none;
    padding: none;
    margin: 0;
    background: #fff;
    border-radius: 4px;
    padding: 4px 0;
    display: none;
    position: absolute;
    width: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.sub_child_li{
    padding: 5px 10px;
    cursor: pointer;
    transition: .3s;
    position: relative;
}
.menu_icon{
    position: absolute;
    right: 18px;
    top: 12px;
}
.sub_child_li ul{
    list-style-type: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    padding: none;
    margin: 0;
    border-radius: 4px;
    padding: 4px 0;
    white-space: nowrap;
    display: none;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.sub_child_li ul li{
    padding: 5px 20px;
    white-space: nowrap;
    cursor: pointer;
}
.sub_child_li span, .sub_child_li ul li span{
    transition: .3s;
}
.sub_child_li span:hover, .sub_child_li ul li span:hover{
    color: #ff8203;
}
.navbar-container{
    align-items: flex-start;
}
.navbar-light .navbar-nav .nav-item{
    width: 130px;
    padding: 0;
}
.dropdown:hover .sub_child, .dropdown .sub_child .sub_child_li:hover .next_child{
    display: block;
}
.navbar-brand{
    position: relative;
}
.nav-item span{
    cursor: pointer;
}
.line{
    height: 2px;
    width: 160px;
    display: block;
    animation: start 1s linear infinite;
    position: absolute;
    bottom: 8px;
    right: 0;
}
.menu-sticky .navbar-light .navbar-nav .nav-link{
    color: #1d1730;
}
@keyframes start {
    0%{
        background: linear-gradient(to right,rgb(255, 130, 4, .6) 0%,rgba(255,255,255,0) 50%,  rgba(255,255,255,0) 100%);
    }
    10%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, #FF8204 15%, rgba(255,255,255,0) 100%);
    }
    20%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, #FF8204 30%, rgba(255,255,255,0) 100%);
    }
    30%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, #FF8204 45%, rgba(255,255,255,0) 100%);
    }
    40%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, #FF8204 60%, rgba(255,255,255,0) 100%);
    }
    50%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, #FF8204 75%, rgba(255,255,255,0) 100%);
    }
    60%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, #FF8204 90%, rgba(255,255,255,0) 100%);
    }
    70%{
        background: linear-gradient(to right,rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, #FF8204 100%);
    }
    80%{        
        background: linear-gradient(to right,rgba(255, 130, 4, 0.3) 0%, rgba(255,255,255,0) 50%, rgb(255, 130, 4, .6) 100%);
    }
    90%{
        background: linear-gradient(to right,rgb(255, 130, 4, .6)  0%, rgba(255,255,255,0) 50%, rgb(255, 130, 4, .3) 100%); 
    }
    100%{
        background: linear-gradient(to right,rgb(255, 130, 4, .6)  0%,rgba(255,255,255,0) 50%,  rgba(255,255,255,0) 100%);
    }
}
</style>